<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="XAdmin/commons/header"></div>
<style>
    input {
        width: 280px !important;
    }
</style>
<body>
<div class="layui-container" id="settings">
    <div class="fly-panel">
        <div class="fly-none" style="text-align: -webkit-center">

            <span style="width: 52%; height: 222px; border: 1px solid #00bcd4; display: block;padding: 10%">

                <div id="app" class="layui-fluid">
                    <div class="layui-row">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label for="oldPwd" class="layui-form-label">
                                    <span class="x-red">*</span>旧密码
                                </label>
                                <div class="layui-input-inline">
                                    <input type="password" v-model="oldPwd" id="oldPwd" name="oldPwd" required=""
                                           lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="newPwd" class="layui-form-label">
                                    <span class="x-red">*</span>新密码
                                </label>
                                <div class="layui-input-inline">
                                    <input v-model="newPwd" type="password" id="newPwd"
                                           name="newPwd"
                                           lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="finalNewPwd" class="layui-form-label">
                                    <span class="x-red">*</span>确认密码
                                </label>
                                <div class="layui-input-inline">
                                    <input v-model="finalNewPwd" type="password" id="finalNewPwd"
                                           name="finalNewPwd"
                                           lay-verify="required"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item" style="text-align: center">
                                <button class="layui-btn" @click.prevent="sub">
                                    修改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </span>
            <p>用户密码管理</p>
        </div>
    </div>
</div>
<script>

    const vm = new Vue({
        el: "#settings",
        data: {
            oldPwd: '',
            newPwd: '',
            finalNewPwd: ''
        },
        methods: {
            sub() {
                if ((vm.oldPwd.length < 6) || (vm.oldPwd.length < 6) || (vm.finalNewPwd.length < 6)) {
                    layer.alert("密码不能小于6位!");
                    return false;
                }
                if (this.newPwd !== this.finalNewPwd) {
                    layer.alert("两次输入密码不一致!");
                    return false;
                }
                let request = {
                    url: "admin/updPwd",
                    data: {
                        oldPwd: this.oldPwd,
                        newPwd: this.finalNewPwd
                    },
                    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
                    method: 'post'
                };
                sendRequest(request, (data) => {
                    if (data.code === 20000) {
                        layer.alert("修改成功", {
                            icon: 6
                        });
                        this.oldPwd = null;
                        this.newPwd = null;
                        this.finalNewPwd = null;

                    } else {
                        layer.alert(data.msg, {
                            icon: 5
                        })
                    }
                    // console.log(data)
                })
            }
        }
    })

</script>
</body>
</html>